<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  

  
  
  
  
  
  
  <title>义小拳</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="义小拳">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="义小拳">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="韦海燕">
<meta name="twitter:card" content="summary">
  
  
    <link rel="icon" href="/blog/css/images/favicon.ico">
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  

  
  <!-- baidu webmaster push -->
  <script src='//push.zhanzhang.baidu.com/push.js'></script>
<meta name="generator" content="Hexo 4.2.0"></head>
<body class="home blog custom-background custom-font-enabled single-author">
  <div id="page" class="hfeed site">
      <header id="masthead" class="site-header" role="banner">
    <hgroup>
      <h1 class="site-title">
        <a href="/blog/" title="义小拳" rel="home">义小拳</a>
      </h1>
      
        <h2 class="site-description">
          <a href="/blog/" id="subtitle">打开格局，解锁人生技能</a>
        </h2>
      
    </hgroup>

    <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">菜单</button>
            <a class="assistive-text" href="/#content" title="跳至内容">跳至内容</a><!--TODO-->
            <div class="menu-main-container">
                <ul id="menu-main" class="nav-menu">
                
                    <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/blog/">Home</a></li>
                
                    <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/blog/archives">Archives</a></li>
                
                </ul>
            </div>
    </nav>
</header>

      <div id="main" class="wrapper">
        <div id="primary" class="site-content"><div id="content" role="main">
  
    <article id="post-G码云+hexo搭建博客" class="post-G码云+hexo搭建博客 post type-post status-publish format-standard hentry">
    <!---->

      <header class="entry-header">
        
        
  
    <h1 class="entry-title">
      <a class="article-title" href="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/">G码云+hexo搭建博客</a>
    </h1>
  

        
        <div class="comments-link">
            
            <a href="javascript:void(0);" data-url="http://yoursite.com/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/" data-id="ck7zo40nz00008kl18jjb5h0o" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
        </div><!-- .comments-link -->
      </header><!-- .entry-header -->

    <div class="entry-content">
      
        <h1 id="G码云-hexo搭建博客"><a href="#G码云-hexo搭建博客" class="headerlink" title="G码云+hexo搭建博客"></a>G码云+hexo搭建博客</h1><!-- vscode-markdown-toc -->
<ul>
<li><ol>
<li><a href="#">搭建默认的博客</a></li>
</ol>
</li>
<li><ol start="2">
<li><a href="#-1">怎么自定义或更换博客主题</a></li>
</ol>
</li>
<li><ol start="3">
<li><a href="#-1">部署在码云</a></li>
</ol>
</li>
</ul>
<!-- vscode-markdown-toc-config
    numbering=true
    autoSave=true
    /vscode-markdown-toc-config -->
<!-- /vscode-markdown-toc -->
<h2 id="1-搭建默认的博客"><a href="#1-搭建默认的博客" class="headerlink" title="1. 搭建默认的博客"></a>1. <a name></a>搭建默认的博客</h2><p> <strong>第一步：</strong> 在E:\newStudy安装Hexo</p>
<p>npm install -g hexo</p>
<p><strong>第二步：</strong> 在E:\newStudy下新建一个文件自定义命名如：Hexo</p>
<p><strong>第三步：</strong> 进入Hexo文件<br>cd Hexo</p>
<p><strong>第四步：</strong> 在Hexo文件下，初始化hexo<br>hexo init</p>
<p><strong>第五步：</strong> 在Hexo文件下或生成一下东西<br><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613642565.png" alt="Alt text"></p>
<p><strong>第六步：</strong> 在Hexo文件下安装依赖包<br>npm install</p>
<p><strong>第七步：</strong> 在Hexo下开始构建<br>hexo generate<br>(会多出一个public文件)<br><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613593825.png" alt="Alt text"></p>
<p><strong>第八步：</strong> 启动服务器<br>hexo server</p>
<p><strong>第九步：</strong> 启动后，输入路径 <a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a></p>
<p>可以看到默认版本<br>当然可以自己修改的，但是官方也提供一些网友自己制作的主题，可以直接套用网址：<u><a href="https://hexo.io/themes/" target="_blank" rel="noopener">https://hexo.io/themes/</a></u></p>
<h2 id="2-怎么自定义或更换博客主题"><a href="#2-怎么自定义或更换博客主题" class="headerlink" title="2. 怎么自定义或更换博客主题"></a>2. <a name="-1"></a>怎么自定义或更换博客主题</h2><p><strong>第一步：</strong> 选择一个自己喜欢的后，点击进入到github中，<br>下载下来是一个zip包，把里面的东西解压至hexo/themes中<br><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613681572.png" alt="1584613681572"></p>
<p><strong>第二步：</strong> 打开_config.yml将喜欢的主题名字如hexo-theme-cyanstyle-master,对应到里面的值theme</p>
<p><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613701534.png" alt="1584613701534"></p>
<p>冒号后面要有个空格，而且是英文下的空格，不然会有错误修改后保存</p>
<p><strong>第三步：</strong> 然后在Hexo项目下执行下面指令<br>hexo generate</p>
<p>hexo server</p>
<p>然后刷新<a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a>  新主题就更换好了</p>
<p>Hexo中_config.yml 文件的其他配置，官方的文档： <a href="https://hexo.io/zh-cn/docs/configuration.html" target="_blank" rel="noopener">https://hexo.io/zh-cn/docs/configuration.html</a></p>
<p><strong>第四步：</strong> 编写博客文章。可以使用马克飞象 链接：<u><a href="https://maxiang.io/" target="_blank" rel="noopener">https://maxiang.io/</a></u>，在编辑器里面写好文章后，另存为MarkDown文件,</p>
<p><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613727572.png" alt="1584613727572"></p>
<p>选择markdown保存，保存下来是一个zip压缩包。内部是md文件，</p>
<p>将写好的.md文件放入hexo文件夹下的source 目录下的 _posts 文件夹中，可以看到里面有个hello-world.md 文件，这是默认的文章。</p>
<p>现在  关掉服务，再hexo server就可以看到刚才的文章了</p>
<h2 id="3-部署在码云"><a href="#3-部署在码云" class="headerlink" title="3. 部署在码云"></a>3. <a name="-1"></a>部署在码云</h2><p><strong>第一步：</strong> 新建一个项目<br><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613758535.png" alt="1584613758535"></p>
<p><strong>第二步：</strong> 然后去到Hexo文件下，执行这个指令</p>
<p>npm install hexo-deployer-git –save<br>【代码推送到码云】</p>
<p><strong>第三步：</strong> 再次打开Hexo根目录的_config.yml 文件，修改deploy 的值</p>
<p><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613785849.png" alt="1584613785849"></p>
<p>冒号后面必须要有个空格Repository【刚创建的git项目地址】</p>
<p><strong>第四步：</strong> 在Hexo文件下执行指令 hexo deploy 将代码部署至码云，去到官网，代码已经上传上去。</p>
<p><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613815249.png" alt="1584613815249"></p>
<p>点击服务—Gitee pages<br><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613849199.png" alt="1584613849199"></p>
<p><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613899070.png" alt="1584613899070"></p>
<p>点击地址就是外网可以访问的博客了,以上步骤算是框架基本搭建好了</p>
<pre><code>如果遇到没有样式的问题，是路径问题
修改hexo中 _config.yml 文件：
将root:/  修改为 root:/ xxx.guithub.io 。即 在后面加上Github 主页的仓库名</code></pre><p><img src="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1584613933149.png" alt="1584613933149"></p>
<blockquote>
<p>然后执行<br>hexo clean  ##清理<br>hexo generate   ##构建、编译</p>
<p>hexo server  ##启动服务<br>hexo deploy   ##上传至服务器</p>
</blockquote>
<p><strong>以后写博客，重复下面四个步骤就可以了</strong></p>
<pre><code>在makdown写好后，下载，放到E:\newStudy\Hexo\source\_posts目录下
然后执行
hexo clean  ##清理
hexo generate   ##构建、编译
hexo server  ##启动服务
hexo deploy   ##上传至服务器</code></pre>
      
    </div><!-- .entry-content -->

    <footer class="entry-meta">
    <a href="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/">
    <time datetime="2020-03-20T03:47:47.499Z" class="entry-date">
        2020-03-20
    </time>
</a>
    
    
    </footer>
</article>






  
    <article id="post-vue-router根据用户权限配置菜单" class="post-vue-router根据用户权限配置菜单 post type-post status-publish format-standard hentry">
    <!---->

      <header class="entry-header">
        
        
  
    <h1 class="entry-title">
      <a class="article-title" href="/blog/2020/03/20/vue-router%E6%A0%B9%E6%8D%AE%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/">vue-router根据用户权限配置菜单</a>
    </h1>
  

        
        <div class="comments-link">
            
            <a href="javascript:void(0);" data-url="http://yoursite.com/2020/03/20/vue-router%E6%A0%B9%E6%8D%AE%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/" data-id="ck7zo40o600018kl1cfypgyyv" class="leave-reply bdsharebuttonbox" data-cmd="more">Share</a>
        </div><!-- .comments-link -->
      </header><!-- .entry-header -->

    <div class="entry-content">
      
        <!-- vscode-markdown-toc -->
<ul>
<li><ol>
<li><a href="#vue-router">vue-router根据用户权限配置菜单</a><ul>
<li>1.1. <a href="#">业务逻辑</a></li>
<li>1.2. <a href="#-1">用到的技术</a></li>
<li>1.3. <a href="#-1">遇到的问题</a><ul>
<li>1.3.1. <a href="#-1">为什么会进入无限循环？</a></li>
<li>1.3.2. <a href="#nextnextnext...to">为什么有时使用next(),有时使用next(‘/‘)或next({…to})?</a></li>
</ul>
</li>
<li>1.4. <a href="#-1">前端开发简单的逻辑路由守卫里权限配置逻辑</a></li>
</ul>
</li>
</ol>
</li>
</ul>
<!-- vscode-markdown-toc-config
    numbering=true
    autoSave=true
    /vscode-markdown-toc-config -->
<!-- /vscode-markdown-toc -->
<h2 id="1-vue-router根据用户权限配置菜单"><a href="#1-vue-router根据用户权限配置菜单" class="headerlink" title="1. vue-router根据用户权限配置菜单"></a>1. <a name="vue-router"></a>vue-router根据用户权限配置菜单</h2><p>@(vue)[ vue-router | next | router.beforeach ]</p>
<h3 id="1-1-业务逻辑"><a href="#1-1-业务逻辑" class="headerlink" title="1.1. 业务逻辑"></a>1.1. <a name></a>业务逻辑</h3><p>比如有个系统有两个角色，普通用户和管理者，普通用户登录后可以看到模块A，管理者登录后可以看到模块B。</p>
<p>技术实现逻辑：用户登录后，后台判断用户的角色是普通用户还是管理者，于是根据角色返回菜单权限，前端根据后台提供的菜单权限，动态配置路由。用户看到的模块都是符合该用户角色的内容。</p>
<h3 id="1-2-用到的技术"><a href="#1-2-用到的技术" class="headerlink" title="1.2. 用到的技术"></a>1.2. <a name="-1"></a>用到的技术</h3><ul>
<li>vue-rouer:router.beforEach,next()</li>
<li>filter</li>
<li>vuex</li>
</ul>
<h3 id="1-3-遇到的问题"><a href="#1-3-遇到的问题" class="headerlink" title="1.3. 遇到的问题"></a>1.3. <a name="-1"></a>遇到的问题</h3><h4 id="1-3-1-为什么会进入无限循环？"><a href="#1-3-1-为什么会进入无限循环？" class="headerlink" title="1.3.1. 为什么会进入无限循环？"></a>1.3.1. <a name="-1"></a>为什么会进入无限循环？</h4><p><strong>例如下面的例子（会使得系统进入无限循环）</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">router.beforeEach((to,form,next)&#x3D;&gt;&#123;</span><br><span class="line">  if(用户已经登陆)&#123;</span><br><span class="line">    if(第一次进入)&#123;</span><br><span class="line">         将第一次进入的变量做个标记;</span><br><span class="line">         动态添加路由；</span><br><span class="line">    &#125;</span><br><span class="line">     next();</span><br><span class="line">  &#125;else&#123;</span><br><span class="line">     &#x2F;&#x2F;如果用户没有登陆</span><br><span class="line">     next(&#39;&#x2F;login&#39;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>其实导致会进入无限循环的结果是因为对vue-router文档next()的解释不理解，以为next(‘指定到想去的地方路径’)就可以安全到达了，其实不是next传入的参数里面有路径的时候，会一直进入跳转这个操作。为什么呢，为什么呢，文档其实写的很明显了，是由于知识储备不够，对文档里的专业名词不敏感而忽略了这几个词的重要意义！！！！！！！ </p>
<p><img src="/blog/2020/03/20/vue-router%E6%A0%B9%E6%8D%AE%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/1584588549390.png" alt="1584588549390"></p>
<p>文档说的守卫是异步解析执行，提示了异步解析执行需要使用resolve才能结束等待状态，而结束这一状态的方法，只有next()；不传参数的时候才有resolve.所以要防止进入无限循环，就要知道什么情况下使用next();</p>
<h4 id="1-3-2-为什么有时使用next-有时使用next-‘-‘-或next-…to"><a href="#1-3-2-为什么有时使用next-有时使用next-‘-‘-或next-…to" class="headerlink" title="1.3.2. 为什么有时使用next(),有时使用next(‘/‘)或next({…to})?"></a>1.3.2. <a name="nextnextnext...to"></a>为什么有时使用next(),有时使用next(‘/‘)或next({…to})?</h4><p><strong>借助上面的图:</strong>已知next()是可以结束跳转这个操作的，场景：小义的目标：进入地铁站坐上地铁，于是小义进入地铁站，拿出地铁卡（相等于用了next()），可以进入地铁站。完成了目标结束了这个操作。如下时序图：</p>
<p><img src="/blog/2020/03/20/vue-router%E6%A0%B9%E6%8D%AE%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/1584588595384.png" alt="1584588595384"></p>
<blockquote>
<p><strong>next(‘/‘)或next({…to})是跳转到指定的地址</strong>，<strong>场景：</strong>小义目标：进入地铁站坐上地铁，但是小义去到地铁站后，忘记拿地铁卡，于是回家去找地铁卡，回到家没找到，于是想到可以使用手机登录地铁app可以扫码二维码进入，于是又回到地铁站，但是回到地铁站后，发现手机没电了，小义又回家继续找地铁卡，就这样来回反复，没有地铁卡（next()）就是进不来地铁站坐上地铁，完成不了目标。如下时序图：</p>
</blockquote>
<p><img src="/blog/2020/03/20/vue-router%E6%A0%B9%E6%8D%AE%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/1584588638584.png" alt="1584588638584"></p>
<h3 id="1-4-前端开发简单的逻辑路由守卫里权限配置逻辑"><a href="#1-4-前端开发简单的逻辑路由守卫里权限配置逻辑" class="headerlink" title="1.4. 前端开发简单的逻辑路由守卫里权限配置逻辑"></a>1.4. <a name="-1"></a>前端开发简单的逻辑路由守卫里权限配置逻辑</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">router.beforeEach((to,form,next)&#x3D;&gt;&#123;</span><br><span class="line">  if(用户已经登陆)&#123;</span><br><span class="line">    if(第一次进入)&#123;</span><br><span class="line">         将第一次进入的变量做个标记;</span><br><span class="line">         动态添加路由；</span><br><span class="line">         next(&#39;去到对应角色模块&#39;);</span><br><span class="line">    &#125;else&#123;</span><br><span class="line">    &#x2F;&#x2F;防止进入无限循环，符合条件后，使用next()告知结束跳转行为。</span><br><span class="line">         next();</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">  &#125;else&#123;</span><br><span class="line">     &#x2F;&#x2F;如果用户没有登陆，去到登录页</span><br><span class="line">     if(如果没有登录且获得的目标路由to.path等于登录页)&#123;</span><br><span class="line">        next(&#39;&#x2F;login&#39;);</span><br><span class="line">     &#125;else&#123;</span><br><span class="line">       &#x2F;&#x2F; 得知获取的目标路由to.path是去登陆页，就执行中止跳转的操作</span><br><span class="line">        next();</span><br><span class="line">     &#125;</span><br><span class="line">     </span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      
    </div><!-- .entry-content -->

    <footer class="entry-meta">
    <a href="/blog/2020/03/20/vue-router%E6%A0%B9%E6%8D%AE%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/">
    <time datetime="2020-03-20T03:47:43.588Z" class="entry-date">
        2020-03-20
    </time>
</a>
    
    
    </footer>
</article>






  
  

</div></div>
        <div id="secondary" class="widget-area" role="complementary">
  
    <aside id="search" class="widget widget_search"><form role="search" method="get" accept-charset="utf-8" id="searchform" class="searchform" action="//google.com/search">
    <div>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="搜索" />
    </div>
</form></aside>
  
    
  
    
  
    
  <aside class="widget">
    <h3 class="widget-title">Recents</h3>
    <div class="widget-content">
      <ul>
        
          <li>
            <a href="/blog/2020/03/20/G%E7%A0%81%E4%BA%91+hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/">G码云+hexo搭建博客</a>
          </li>
        
          <li>
            <a href="/blog/2020/03/20/vue-router%E6%A0%B9%E6%8D%AE%E7%94%A8%E6%88%B7%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE%E8%8F%9C%E5%8D%95/">vue-router根据用户权限配置菜单</a>
          </li>
        
      </ul>
    </div>
  </aside>

  
    
  
    
  
</div>
      </div>
      <footer id="colophon" role="contentinfo">
    <p>&copy; 2020 韦海燕
    All rights reserved.</p>
    <p>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></p>
</footer>
    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/js/share.js'];</script>

<script src="/js/jquery-3.3.1.min.js"></script>


  
<link rel="stylesheet" href="/blog/fancybox/jquery.fancybox.css">

  
<script src="/blog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/blog/js/script.js"></script>


<script src="/js/navigation.js"></script>

<div id="bg"></div>

  </div>
</body>
</html>